<template>

	<view class="">
		<u-tabbar :value="navIndex" @change="changeNavBar" :fixed="true" inactiveColor="#2c2c2c" activeColor="#d4237a"
			:placeholder="true" :safeAreaInsetBottom="true">
			<u-tabbar-item text="首页" @click="goIndex">
				<image class="u-page__item__slot-icon" slot="active-icon" src="../../static/images/index/首页(4).svg">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="../../static/images/index/首页(3).svg">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="订单" @click="goOrder">
				<image class="u-page__item__slot-icon" slot="active-icon" src="../../static/images/index/订单(1).svg">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="../../static/images/index/订单.svg">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="购物车" @click="goShopping">
				<image class="u-page__item__slot-icon" slot="active-icon" src="../../static/images/index/购物车空(2).svg">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="../../static/images/index/购物车空.svg">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="我的" @click="goMyInfo">
				<image class="u-page__item__slot-icon" slot="active-icon" src="../../static/images/index/我的(6).svg">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="../../static/images/index/我的(5).svg">
				</image>
			</u-tabbar-item>
		</u-tabbar>
	</view>

</template>

<script>
	
	export default {
		data() {
			return {
				navIndex: 0
			}
		},
		methods: {
			goIndex() {

			},
			goOrder() {

			},
			goShopping() {

			},
			goMyInfo() {

			}
		}

	}
</script>

<style lang="scss" scoped>
	.u-page__item__slot-icon {
			width: 23px;
			height: 23px;
			color: #000;
		}
</style>
